/*
 * @Description  : Home 页
 * @Author       : Keyman
 * @Date         : 2025-10-29 11:05:07
 * @LastEditors  : Keyman
 * @LastEditTime : 2025-11-26 19:24:30
 */

import { useState } from "react";
import { Layout } from "antd";
import Sidebar from "../../components/navLeft";
import BreadCrumb from "../../components/breadCrumb";
import MyHeader from "../../components/header";
import { theme } from "antd";
import { Outlet } from "react-router-dom";

const { Header, Content, Footer, Sider } = Layout;

function Home() {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  return (
    <>
      <div className="home">
        <Layout style={{ minHeight: "100vh" }}>
          <Sider
            collapsible
            collapsed={collapsed}
            onCollapse={(value) => setCollapsed(value)}
          >
            <Sidebar />
          </Sider>
          <Layout>
            <Header
              style={{
                paddingRight: 20,
                background: colorBgContainer,
                textAlign: "right",
              }}
            >
              <MyHeader />
            </Header>
            <Content
              style={{
                margin: "0 16px",
                height: "90vh",
                overflowY: "auto",
                overflowX: "hidden",
              }}
            >
              <BreadCrumb />
              <Outlet />
            </Content>
            <Footer style={{ textAlign: "center" }}>
              Ant Design ©{new Date().getFullYear()} Created by Ant UED
            </Footer>
          </Layout>
        </Layout>
      </div>
    </>
  );
}

export default Home;
